<template>
<div>
    <el-form :model="form"  label-width="80px" >
        <el-form-item label="SPU名称">
          <span>{{spuName || "暂无名称"}}</span>
        </el-form-item>
        <el-form-item label="SKU名称">
          <el-input v-model="formData.skuName" placeholder="SKU名称" style="width:300px"></el-input>
        </el-form-item>
        <el-form-item label="价格(元)">
          <el-input v-model.number="formData.price" placeholder="价格" style="width:120px" type="number"></el-input>
        </el-form-item>
        <el-form-item label="重量(千克)">
          <el-input v-model="formData.weight" placeholder="重量" style="width:150px"></el-input>
        </el-form-item>
        <el-form-item label="规格描述">
            <el-input v-model="formData.skuDesc" placeholder="规格描述" style="width:600px" maxlength="200" show-word-limit :rows="5" type='textarea'></el-input>
        </el-form-item>
        <el-form-item label="平台属性">
            <el-form   el-form :model="form" :inline="true" label-position='right' label-width='100px'>
            <el-form-item :label="dataOne.attrName" size="normal" v-for="dataOne,index in platformData" :key="dataOne.id" style="margin-bottom:20px;">
            <el-select  :placeholder="dataOne.attrName" clearable filterable v-model="saveslect[index].value" @change="updateAttr(index,2)">
                <el-option
                :label="dataTwo.valueName"
                :value="`${dataTwo.id}:${dataOne.id}`"
                :key="index"
                v-for="dataTwo,index in dataOne.attrValueList"
                >
                </el-option>
            </el-select>
            </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="销售属性">
            <el-form  :inline="true" label-position='right' label-width='100px'>
            <el-form-item :label="data.saleAttrName" size="normal" v-for="data,index in salesData" :key="data.id">
            <el-select v-model="data.attridAndValueid" :placeholder="data.saleAttrName" clearable filterable @change="updateAttr(index,1)">
                <el-option
                :label="datas.saleAttrValueName"
                :value="`${datas.id}:${data.id}`"
                v-for="datas,index in data.spuSaleAttrValueList"
                :key='index'
                >
                </el-option>
            </el-select>
            </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="图片列表">
        <el-table :data="imgData" border stripe @selection-change='slectPhoto'>
            <el-table-column width="40" type="selection" >
            </el-table-column>
            <el-table-column 
                label="图片"
                prop="imgUrl"
                >
                <template slot-scope="{row,$index}">
                    <img :src="row.imgUrl" alt="" style="width:100px;height:100px">
                </template>
            </el-table-column>
            <el-table-column 
                label="名称"
                prop="imgName">
            </el-table-column>
            <el-table-column 
                label="操作">
                <template slot-scope="{row,$index}">
                    <el-button type="primary" size="small" v-show="row.isDefault == 0" @click="isDefiult($index)">设为默认</el-button> 
                    <el-tag type="danger" size="mini"  effect="dark" v-show="row.isDefault == 1" style="margin-left:20px">默认</el-tag>
                </template>
            </el-table-column>
        </el-table>
        
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="saveDataNow">保存</el-button>
            <el-button @click="$bus.$emit('esayChange',0)">取消</el-button>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
    name:'skuform',
    data(){
    return{
        spuName:'',
        slect:'',
        form:{
        input:''
        },
        formData:{
        "category3Id": 0,
        "price": '',
        "spuId": 0,
        "tmId": 0,
        "weight": "",
        "skuName": "",
        "skuDefaultImg": "",
        "skuDesc": "",
        "skuAttrValueList": [],
        "skuImageList": [],
        "skuSaleAttrValueList": [],
        
        },
        imgForeData:[],
        imgData:[],
        salesData:[],
        platformData:[],
        saveslect:[],
        saveattr:[]
    }
    },
    methods:{
    async saveDataNow(){
        // this.formData.skuAttrValueList = this.salesData.map(name=>{
        //     if(name.attridAndValueid){
        //     let arr = name.attridAndValueid.split(":")
        //     return{
        //         attrId:arr[1],
        //         valueId:arr[0]
        //          }
        //     }
        // })
        let {salesData,saveslect,imgForeData} = this
        this.formData.skuSaleAttrValueList = salesData.reduce((prev,item)=>{
            if(item.attridAndValueid){
                let  [saleAttrValueId,saleAttrId]= item.attridAndValueid.split(":")
                prev.push({saleAttrId,saleAttrValueId})
            } 
            return prev
        },[])
        this.formData.skuAttrValueList = saveslect.reduce((prev,item)=>{
            if(item.value){
            const  [valueId,attrId]=item.value.split(':')
                prev.push({attrId,valueId}) 
            }
            return prev
        },[])

        this.formData.skuImageList = imgForeData.map(name=>{    
            const {imgName,imgUrl,isDefault} = name
            return {    
            imgName,imgUrl,isDefault,spuImgId:name.id
            }
        })
        console.log(this.formData)
    const result = await this.$API.sku.reqUpData(this.formData)
    if(result.code == 200){
        await this.$bus.$emit('getDataList')
        this.$bus.$emit('esayChange',0)
    }
    },
    isDefiult(index){
        this.imgData.forEach(name=>name.isDefault=0)
        this.imgData[index].isDefault = 1
        this.formData.skuDefaultImg = this.imgData[index].imgUrl
    },
    slectPhoto(value){
        this.imgForeData = value
    },
    async getSkuData(row,catID){
        this.formData.category3Id = row.category3Id
        this.formData.spuId = row.id
        this.formData.tmId = row.tmId
        console.log(row)
        let{oneRegion,twoRegion,threeRegion} = catID
        const imgRasult = await this.$API.sku.reqSkuImg(row.id)
        const listRasult = await this.$API.sku.reqSkuList(row.id)
        const AttrData = await this.$API.sku.reqAttrData(oneRegion,twoRegion,threeRegion)
        const result = [imgRasult,listRasult,AttrData]
        if(result.every(name=> name.code == 200)){
            result[0].data.forEach(name=>name.isDefault = 0)
            this.imgData = result[0].data
            this.salesData = result[1].data
            this.platformData = result[2].data
        }else{
            this.$message.warning('请求失败')
        }
    },
    updateAttr(index,num){
        if(num > 1){
            // ${dataTwo.id}:${dataTwo.valueName}:${dataTwo.attrId}
            let arr = this.saveslect[index].value.split(':')
            this.saveslect[index].valueId = arr[0]
            this.saveslect[index].valueName = arr[1]
            this.saveslect[index].attrId = arr[2]
            }
        }
    },
    props:['listDisplay'],
    watch:{
        listDisplay(){
            if(this.listDisplay != 2){
                Object.assign(this._data,this.$options.data())
            }
        },
        platformData:{
            deep:true,
            handler(){
            let arr = []
            if(this.platformData.length > 0){
                this.platformData.map(()=>arr.push({
                    value:'',
                    attrName:this.platformData[arr.length].attrName,
                    id:this.platformData[arr.length].id,
                    attrId: '',
                    skuId: '',
                    valueId: '',
                    valueName: "",
                    }))
                this.saveslect = arr
            }
            }
        },
        salesData:{
            deep:true,
            handler(){
                let arr = []
                if(this.salesData.length > 0){
                this.salesData.map(()=>arr.push({
                    value:'',
                    }))
                this.saveattr = arr
            }
            }
        }
    },

}
</script>

<style>
</style>